import { Box, Flex } from '@chakra-ui/react';
import CancelButton from './TFCancelButton';
import InvokeButton from './InvokeButton';
import { memo } from 'react';
import StatusIndicator from 'features/system/components/StatusIndicator';
import ProgressBar from 'features/system/components/ProgressBar';

/**
 * Buttons to start and cancel image generation.
 */
const ProcessButtons = () => {
  return (
    <Flex direction="column" gap="3" pb="1">
      {/* <Flex textAlign="center" w="full" justify="center" color="error.500">
        系统升级中, 绘画功能可能不太稳定
        <br />
        给您带来不便, 敬请谅解！
      </Flex> */}
      <Flex gap={2}>
        <InvokeButton />
      </Flex>
      <Flex h="4" position="relative" alignItems="center">
        <StatusIndicator />
        <Box w="full" h="2" rounded="full" overflow="clip">
          <ProgressBar />
        </Box>
        <Box px="2">
          <CancelButton />
        </Box>
      </Flex>
    </Flex>
  );
};

export default memo(ProcessButtons);
